// ❤ 高阶组件----一般放到utils文件夹作为工具使用 【高阶组件抽离的是共用的生命周期或方法】

// ❤ 
// 1. 高阶组件其实就是一个【函数】
// 2. 接收一个【组件】作为参数
// 3. 【返回】一个【新】的组件--返回的组件没有要求，函数式和class都可以
// 4. 【渲染】接收的组件



// 函数式 
import React, { Component } from 'react'
// Com是接收的组件，如在守卫案例中接收的MY， Message组件 
// NewCom是定义的新组件，需要return 
export default function HOCLogin(Com) {
    return class NewCom extends Component {
        componentDidMount() { //在此抽离共用的生命周期
            const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            if (!user.phone) {
                this.props.history.push("/login");  //跳转到登录页
            }

        }
        render() {
            //   Com接收的组件，最终需要渲染到页面上 
            // {...this.props}将路由信息传回给接收的组件，不能影响原有的功能
            return <Com {...this.props}></Com>
        }

    }
}



// 快捷方式
// rfc+rce部分内容拼接 






